題目

CSS Challenge Day11

上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的template，當我們真的不會的時候，還是可以參考他們的寫法，所以沒有想像中困難。

我做好的此題CSS Challeage解答

那麼我們就開始吧。

題目分析

這個題目要求我們製作一雙自己走路的靴子

1. 背景漸層跟地板。
2. 鞋子本身
3. 動畫
   • 初次 loading 時的淡入淡出動畫
   • 鞋子前後移動的動畫
   • 鞋子踩地板上下移動的動畫

前情提要

我們昨天已經把基本的背景、地板跟鞋子本人都做好了：

那我們今天就來把剩下的繼續做完。

開始解題

動畫

初次 loading 的淡入淡出動畫

@keyframes animate-fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

這塊我們昨天是寫在 move 上面，詳細說明如下：

• 0%: 元素的初始透明度設為 0，即完全看不見。
• 100%: 元素的最終透明度設為 1，即完全顯示出來。

所以剛進來的時候會先讓大家看到中間沒有鞋子的畫面（大概1秒)

雙腳前後擺動

@keyframes animate-legSwing {
	0%, 100% {
		transform: rotate(-20deg);
	}
	50% {
		transform: rotate(40deg);
	}
}

• 0% 和 100%：起點和終點都設定為 rotate(-20deg)，也就是腿向後擺動的角度。
• 50%：在動畫進行到一半時，設定為 rotate(40deg)，代表腿向前擺動到最大角度。

動畫的樣子做好之後，由於兩隻腳一左一右要一前一後，所以我們在 leg 上面只能先設定它的樣式，但不會先設定動畫，我們這時候再去設定左右腳的動畫。

.leg {
	.left {
		animation: animate-legSwing 2s ease-in-out infinite;
		.shoe {}
	}
	.right {
		animation: animate-legSwing 2s ease-in-out 1s infinite;
		.shoe {}
	}
}

這邊我們先把裡面 .shoe 的樣子先空下來，等等再來做鞋子的動畫。

這邊我們設定腿部的左右擺動就好，這邊基本上兩隻腳都是套用剛剛做好的 animate-legSwing 但是右腳我們加上了 1 秒的延遲，這樣兩條腿不會同步擺動，而是形成交替擺動的效果。

鞋子踩到地面

兩條腿只在那邊擺動的話，看起來很像在划水，或是騰空的狀態，所以我們要加上一點點上下像是踩到地面的感覺。

@keyframes animate-shoeBounce {
	0%, 100% {
		transform: rotate(-10deg) translateY(-5px) translateX(10px);
	}
	25% {
		transform: rotate(0) translateY(4px) translateX(0);
	}
	50% {
		transform: rotate(10deg) translateY(-10px) translateX(10px);
	}
	75% {
		transform: rotate(0) translateY(-34px) translateX(0);
	}
}

• 0% 和 100%：鞋子會稍微向左上方旋轉（-10deg）並往上移動 5px，再向右移動 10px。
• 25%：鞋子回到原位，旋轉角度為 0，並稍微向下移動 4px。
• 50%：鞋子進一步旋轉到右邊 10deg，然後往上移動 10px，再向右移動 10px。
• 75%：鞋子回到中間位置，並向上移動 34px。
  這邊我加入了很多腳上下移動，左右移動，甚至有點些微旋轉的動態在整個雙腿擺動的過程，去模擬腳舉起來往前走，踩到地板，然後腳尖著地往後滑動的樣子。

.left {
		...
		.shoe {
			animation: animate-shoeBounce 2s ease-in-out infinite;
		}
	}
	.right {
		...
		.shoe {
			animation: animate-shoeBounce 2s ease-in-out 1s infinite;
		}
	}

動畫制作完之後，再把剛剛的 .shoe 的 CSS 樣式補完，這邊在右腳的地方一樣要記得延遲 1 秒，這樣就完成囉～

最後鞋子上下的這部分動畫，其實我自己也調整了蠻久的，覺得要做出跟題目類似的樣子不太容易，我自己是對整個成果還沒有很滿意，但...就算了，差不多就好。
大家也可以自己調整數值看看，我這邊做好的時候長這樣：

Wrap up and go home

希望改變了這種按照步驟的寫法，能讓更多人看得懂，也能跟我一樣喜歡上寫CSS。

那今天就先到這裡，明天我們再繼續來玩下一集。